import * as React from 'react';
import {View, Image, TouchableOpacity, StyleSheet, Text} from 'react-native';

import {exp} from 'react-native/Libraries/Animated/src/Easing';

const SettingListCommon = ({navigation, listInfo, index}) => {
  let uurl = listInfo.url || 'Home';

  const [itemState, setItemState] = React.useState(listInfo.stateActive);
  console.log('itemstate');
  console.log(itemState);

  const styles = StyleSheet.create({
    container: {
      flexDirection: 'row',
      alignItems: 'center',
      fontWeight: '900',
      marginBottom: 25,
    },
    title: {
      fontWeight: 'bold',
      marginLeft: 15,
    },
    icon: {
      position: 'absolute',
      right: 15,
      fontSize: 12,
      fontWeight: '700',
    },
    stateText: {
      position: 'absolute',
      right: 30,
      color: 'rgb(153, 153, 153)',
    },
    stateBtn: {
      width: 48,
      height: 22,
      backgroundColor: 'black',
      borderRadius: 11,
      position: 'absolute',
      right: 20,
      backgroundColor: 'black',
    },
    stateBtnCir: {
      width: 20,
      height: 20,
      borderRadius: 20,
      backgroundColor: 'white',
      position: 'absolute',
      right: 0,
      top: 1,
    },
  });

  return (
    <>
      <View style={[styles.container]}>
        <Image source={listInfo.icon} />
        <Text style={styles.title}>{listInfo.title}</Text>
        <Text style={listInfo.state ? styles.stateText : {width: 0}}>
          {listInfo.state}
        </Text>
        <Text style={listInfo.stateBtn ? {width: 0} : styles.icon}>{`>`}</Text>

        {listInfo.stateBtn ? (
          <View
            style={[
              styles.stateBtn,
              !itemState && {backgroundColor: 'rgb(221, 221, 221)'},
            ]}>
            <View
              style={[
                styles.stateBtnCir,
                itemState ? {right: 1} : {right: 26},
              ]}></View>
            <Text
              style={{width: '100%', height: '100%', opacity: 1}}
              onPress={() => {
                setItemState(!itemState);
              }}></Text>
          </View>
        ) : null}

        <TouchableOpacity
          style={
            listInfo.stateBtn
              ? {width: 0}
              : {width: '100%', height: '100%', opacity: 0}
          }
          onPress={() => {
            navigation.navigate(uurl);
          }}></TouchableOpacity>
      </View>
    </>
  );
};

export default SettingListCommon;
